<template>
  <div class="warp __warp">
    <div class="content">
      <div class="key-word">
        关键词 {{ $route.query.keyWord }} 为您找到相关结果
      </div>
      <div class="content__left">
        <div class="item" v-for="item in note" :key="item.noteId">
          <note-item :value="item" />
        </div>
        <el-pagination
          @current-change="current"
          hide-on-single-page
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="page.count"
        >
        </el-pagination>
      </div>
      <template v-if="!note.length">
        <div>暂无搜索结果</div>
      </template>
    </div>
  </div>
</template>

<script>
import noteItem from "~/components/home/note_item";
import homeFloat from "~/components/home/home_float";
export default {
  components: {
    noteItem,
    homeFloat,
  },
  computed: {
    currentPage() {
      return parseInt(parseInt(this.page.pageNo) + 1);
    },
  },
  async asyncData({ app }) {
    let data = await app.$axios.get("/api/get/all/note", {
      params: {
        pageSize: 10,
        pageNo: 0,
        search: app.context.query.keyWord,
      },
    });
    let note = data.data.result;
    note.forEach((item) => {
      item.title.replace(
        app.context.query.keyWord,
        `<em class="key-word">app.context.query.keyWord</em>`
      );
    });
    return {
      note: note,
      page: data.data.page,
    };
  },
  watch: {
    "$route.query.keyWord"() {
      this.getData();
    },
  },
  data() {
    return {};
  },
  methods: {
    current(index) {
      this.page.pageNo = index - 1;
      this.getData();
    },
    async getData() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      let data = await this.$axios.get("/api/get/all/note", {
        params: {
          ...this.page,
          search: this.$route.query.keyWord,
        },
      });
      this.note = data.data.result;
      this.page = data.data.page;
    },
  },
};
</script>

<style lang="scss" scoped >
.warp {
  .content {
    // display: flex;
    margin-top: 30px;
    .key-word {
      font-size: 30px;
      margin-bottom: 30px;
    }
    .content__left {
      //   margin-right: 30px;
      width: 100%;
      .item {
        background-color: white;
        margin-bottom: 40px;
      }
    }
  }
}
</style>
